<template>
	<div id="app">
		<div class="lsh">
			<div>
				<!-- tap导航切换 -->
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane name="first">
						<span slot="label"><i class="el-icon-video-camera-solid"></i> 按视频搜索</span>
						<!-- 搜索框 -->
						<div style="background-color: #FFFFFF; padding-top: 20px;padding-left: 20px;">
							<input class="kzf_search2" v-model="Video_value" type="text" placeholder="请输入UP主昵称或UID进行搜索">
							<button class="kzf_search3" @click="getVideo(0, 1,Video_value)">搜索视频</button>
						</div>
						<!-- 筛选条件 -->
						<div class="filtrate">
							<h4>筛选条件</h4>
							<!-- 视频筛选条件 -->
							<div class="heade">
								<p>视频分类:</p>
								<button @click="num=0" :class="num==0?'active':''">全部</button>
								<div class="heade1" v-for="(item,index) in simple.Category" :key="item.TId">
									<button @click="getVideo(index+1,item.TId)"
										:class="num==index+1?'active':''">{{item.TName}}</button>
								</div>
							</div>

							<div>
								<span>视频时长：</span>
								<el-radio-group v-model="radio2" fill='#57309f' size="mini">
									<el-radio-button label="全部">全部</el-radio-button>
									<el-radio-button :label="item.Key" v-for="item in simple.DurationRange"
										:key="item.key">
										{{item.Key}}
									</el-radio-button>
								</el-radio-group>
							</div>

							<div>
								<span>视频类型：</span>
								<el-radio-group v-model="radio3" fill='#57309f' size="mini">
									<el-radio-button label="全部">全部</el-radio-button>
									<el-radio-button label="自制">自制</el-radio-button>
									<el-radio-button label="转载">转载</el-radio-button>
								</el-radio-group>
							</div>

							<div class="more-condition">
								<span>更多条件：</span>
								<el-checkbox-group v-model="checkList" size="mini">
									<el-checkbox label="关联活动"></el-checkbox>
									<el-checkbox label="关联广告"></el-checkbox>
									<el-checkbox label="合作视频"></el-checkbox>
									<el-checkbox label="已删除视频"></el-checkbox>
								</el-checkbox-group>
							</div>
						</div>

						<!-- 视频数据统计 -->
						<div class="statistics" style="padding:20px;">
							<div class="video-message">
								<div>
									<el-radio-group v-model="radio4" fill='#57309f' size="mini">
										<el-radio-button label="播放最多">播放最多</el-radio-button>
										<el-radio-button label="点赞最多">点赞最多</el-radio-button>
										<el-radio-button label="收藏最多">收藏最多</el-radio-button>
										<el-radio-button label="投币最多">投币最多</el-radio-button>
										<el-radio-button label="评论最多">评论最多</el-radio-button>
										<el-radio-button label="弹幕最多">弹幕最多</el-radio-button>
										<el-radio-button label="分享最多">分享最多</el-radio-button>
										<el-radio-button label="最新发布">最新发布</el-radio-button>
									</el-radio-group>
								</div>
								<div>
									<el-radio-group v-model="radio5" size="medium" fill='#57309f'>
										<el-radio-button label="3天"></el-radio-button>
										<el-radio-button label="7天"></el-radio-button>
										<el-radio-button label="30天"></el-radio-button>
										<el-radio-button label="自定义"></el-radio-button>
									</el-radio-group>
								</div>
								<div>
									<div class="block">
										<!-- <el-date-picker v-model="value1" type="daterange" range-separator="至"
											start-placeholder="开始日期" end-placeholder="结束日期">
										</el-date-picker> -->
									</div>
								</div>
								<div>
									<el-button style="width: 50px; height: 25px; line-height: 0px;" type="text"
										@click="open">导出</el-button>
								</div>
							</div>

							<!-- 视频信息统计 -->
							<div class="shi_pin_xin">
								<ul>
									<li style="width: 640px;margin-right: 80px;">视频信息</li>
									<li style="margin-right: 40px; width: 130px;">视频分区</li>
									<li style="margin-right: 40px;">播放数</li>
									<li style="margin-right: 40px;">点赞数</li>
									<li style="margin-right: 40px;">收藏数</li>
									<li style="margin-right: 40px;">投币数</li>
									<li style="margin-right: 40px;">评论数</li>
									<li style="margin-right: 40px;">弹幕数</li>
									<li>分享数</li>
								</ul>
								<ul v-for="item in video.ItemList" :key="item.BloggerId" class="details">
									<li style="width: 640px;margin-right: 80px;">
										<div class="video_detailed">
											<div style="position: relative;">
												<img :src="'/bfs'+item.LogoUrl.substr(23)"
													style="width: 160px; height: 100px;">
												<span class="video">{{item.Duration}}</span>
											</div>
											<div class="video_message">
												<p>{{item.Title}}<span>{{item.CopyRight}}</span></p>
												<p class="brief">简介：{{item.Description}}</p>
												<p class="f12">{{item.Author}}</p>
												<p style="color: #999999;font-size: 12px;">发布于 {{item.PubTime}}</p>
											</div>
										</div>
									</li>
									<li style="margin-right: 40px; width: 130px;">{{item.Category}}</li>
									<li style="margin-right: 40px;">{{item.ViewCount|moneyFormat}}</li>
									<li style="margin-right: 40px;">{{item.LikeCount|moneyFormat}}</li>
									<li style="margin-right: 40px;">{{item.FavoriteCount|moneyFormat}}</li>
									<li style="margin-right: 40px;">{{item.CoinCount|moneyFormat}}</li>
									<li style="margin-right: 40px;">{{item.ReplyCount|moneyFormat}}</li>
									<li style="margin-right: 40px;">{{item.DanmuCount|moneyFormat}}</li>
									<li>{{item.ShareCount|moneyFormat}}</li>
								</ul>
							</div>
							<!-- 底部分页 -->
							<div style="margin: auto;">
								<el-pagination background layout="prev, pager, next" :total="1000">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane name="second">
						<span slot="label"><i class="el-icon-s-comment"></i> 按评论搜索</span>
						<!-- 搜索框 -->
						<div style="background-color: #FFFFFF; padding-top: 20px;padding-left: 20px;">
							<input class="kzf_search2" type="text" placeholder="请输入UP主昵称或UID进行搜索">
							<button class="kzf_search3">搜索视频</button>
						</div>
						<div class="statistics" style="padding:20px;">
							<div class="video-message">
								<div>
									<el-radio-group v-model="radio4" fill='#57309f' size="mini">
										<el-radio-button label="播放最多">播放最多</el-radio-button>
										<el-radio-button label="点赞最多">点赞最多</el-radio-button>
										<el-radio-button label="收藏最多">收藏最多</el-radio-button>
										<el-radio-button label="投币最多">投币最多</el-radio-button>
										<el-radio-button label="评论最多">评论最多</el-radio-button>
										<el-radio-button label="弹幕最多">弹幕最多</el-radio-button>
										<el-radio-button label="分享最多">分享最多</el-radio-button>
										<el-radio-button label="最新发布">最新发布</el-radio-button>
									</el-radio-group>
								</div>
								<div>
									<el-radio-group v-model="radio5" size="medium" fill='#57309f'>
										<el-radio-button label="3天"></el-radio-button>
										<el-radio-button label="7天"></el-radio-button>
										<el-radio-button label="30天"></el-radio-button>
										<el-radio-button label="自定义"></el-radio-button>
									</el-radio-group>
								</div>
								<div>
									<div class="block">
										<!-- <el-date-picker v-model="value1" type="daterange" range-separator="至"
											start-placeholder="开始日期" end-placeholder="结束日期">
										</el-date-picker> -->
									</div>
								</div>
								<div>
									<el-button style="width: 50px; height: 25px; line-height: 0px;" type="text"
										@click="open">导出</el-button>
								</div>
							</div>

							<!-- 视频信息统计 -->
							<div class="shi_pin_xin">
								<ul>
									<li style="width: 640px;margin-right: 80px;">视频信息</li>
									<li style="margin-right: 40px; width: 120px;">视频分区</li>
									<li style="margin-right: 40px;">播放数</li>
									<li style="margin-right: 40px;">点赞数</li>
									<li style="margin-right: 40px;">收藏数</li>
									<li style="margin-right: 40px;">投币数</li>
									<li style="margin-right: 40px;">评论数</li>
									<li style="margin-right: 40px;">弹幕数</li>
									<li>分享数</li>
								</ul>
								<div style="text-align: center;">
									<img src="../../assets/kzf_tu4.png" alt="" width="150px" height="150px">
									<p>暂无数据</p>
								</div>
							</div>
							<!-- 底部分页 -->
							<div style="margin: auto;">
								<el-pagination background layout="prev, pager, next" :total="1000">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Simple,
		Video
	} from '@/api/simple.js'
	export default {
		data() {
			return {
				simple: {}, //视频分类
				video: [], //视频数据
				activeName: 'first', //默认tap选项卡 选中第一个
				// 搜索框
				Video_value: "", //输入框
				// 分类筛选
				num: 0,
				radio2: '全部',
				radio3: '全部',
				// 更多条件
				checkList: [],
				// 视频信息
				radio4: '播放最多',
				radio5: '7天',
				// 日期
				// value1: '',
			};
		},
		created() {
			// 视频分类
			Simple({
					"r": 0.12188034019271732,
				})
				.then(res => {
					this.simple = res.data.Data;
					// console.log("视频分类", this.simple)
				})
				.catch(err => console.error(err))
			// 视频数据
			Video({
					"r": 0.3135669499328897,
					"SortType": 8,
					"PageIndex": 1,
					"PageSize": 10,
					"BeginCode": 20220729,
					"EndCode": 20220804,
				})
				.then(res => {
					this.video = res.data.Data;
					console.log("视频数据", this.video)
				})
				.catch(err => console.error(err))
		},
		methods: {
			open() {},

			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 导航tab切换
			handleSelect(item) {
				console.log(item);
			},
			// 条件tab切换
			getVideo(index = 0, tid = 0, KeyWord = "") {
				this.num = index;
				console.log(index, tid);
				var user = tid == 0 ? tid : {
					'r': 0.4240117162533925,
					"tid": tid,
					"KeyWord": KeyWord,
					'SortType': 8,
					'PageIndex': 1,
					'PageSize': 10,
					'BeginCode': 20220731,
					'EndCode': 20220806,
					'isBusiness': true
				}
				if (tid != 0) {
					Video(user)
						.then(res => {
							console.log(res.data)
							this.video = res.data.Data;
							console.log("1", this.video)
							return;
						})
						.catch(err => {
							console.error(err)
							return;
						})
				} else if (KeyWord != "") {
					Video(user)
						.then(res => {
							// console.log(res.data)
							this.video = res.data.Data.ItemList;
							// this.Video_value = ""
							console.log("2", res.data.Data.ItemList);
							return;
						})
						.catch(err => {
							console.error(err)
							this.Video_value = "";
							return;
						})
				} else {
					Video({
							'r': 0.4240117162533925,
							'SortType': 8,
							'PageIndex': 1,
							'PageSize': 10,
							'BeginCode': 20220731,
							'EndCode': 20220806,
							'isBusiness': true
						})
						.then(res => {
							console.log(res.data)
							this.video = res.data.Data;
							console.log("3", this.video)

						})
						.catch(err => {
							console.error(err);
						})
				}

			}
		},
		filters: {
			//取截单元,单位
			moneyFormat: function(arg) {
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 4) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "w"
				} else if (arg.toString().length <= 4) {
					const moneys = arg
					const realVal = parseFloat(moneys);
					return realVal
				}
			}
		}

	};
</script>

<!-- 插件样式 -->
<style>
	/********************* 视频搜索 ***************/
	/* tap切换字体 */
	.lsh .is-active {
		color: #57309f !important;
	}

	/* tap切换指示条 */
	.lsh .el-tabs__active-bar {
		background-color: #57309f;
	}

	/* 搜索按钮 */
	.lsh .el-button {
		background-color: #57309f;
		color: #FFFFFF;
	}

	/* 搜索框 */
	.lsh .el-input__inner {
		width: 380px;
	}

	/* 筛选条件按钮*/
	.lsh .el-radio-button__inner {
		border: none;
		border-left: none !important;
		padding: 5px 10px;
		border-radius: 2px;
		font-size: 14px;
	}

	.lsh .el-tabs__header {
		background-color: #FFFFFF;
		margin: 0;
	}

	/****************** 视频信息****************** */

	/* 分页选中背景 */
	.lsh .active {
		background: #57309f !important;
	}
</style>

<style scoped="scoped">
	.shi_pin_xin ul {
		display: flex;
		flex-direction: row;
	}

	.shi_pin_xin ul li {
		width: 100px;
	}

	.shi_pin_xin ul:nth-child(1) {
		background-color: #f7f8fa;
		height: 50px;
		line-height: 50px;
		margin: 10px 0;
		font-size: 14px;
		padding: 0 10px;
		border: none;
	}

	.shi_pin_xin ul:not(:first-child) {
		padding-bottom: 10px;
		border-bottom: 1px solid #ebeef5;
	}

	.shi_pin_xin ul li:not(:first-child) {
		text-align: center;
	}

	.shi_pin_xin .details:hover {
		box-shadow: #dbdee3 0px 0px 5px 0px;
	}

	.details {
		padding-top: 10px;
	}

	.details li:not(:first-child) {
		line-height: 100px;
	}


	.kzf_search2 {
		width: 372px;
		height: 38px;
		border: 1px solid #b9c3d2;
		padding-left: 10px;
		border-radius: 2px 0 0 2px;
		border-right: 0;
	}

	.kzf_search3 {
		width: 104px;
		background-color: #5830a0;
		height: 38px;
		border: 1px #b9c3d2 solid;
		vertical-align: middle;
		border-radius: 0 4px 4px 0;
		color: #fff;
		font-size: 17px;
	}

	#app {
		min-width: 1600px;
	}

	.lsh {
		width: 100%;
		height: 100%;
	}

	/* 视频搜索 */
	.filtrate {
		padding: 20px;
		background-color: #FFFFFF;
	}

	.filtrate h4 {
		border-left: 4px #542E99 solid;
		padding-left: 10px;
		font-weight: 500;
	}

	.filtrate>div {
		margin-top: 10px;
	}

	/* 视频统计信息 */
	.statistics {
		margin-top: 20px;
		background-color: #FFFFFF;
	}

	.more-condition,
	.video-message,
	.video_detailed {
		display: flex;
		flex-direction: row;
	}

	.video_detailed .video_message {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 10px;
	}

	.video_message p:nth-child(1) {
		font-size: 16px;
		color: #000000;
		font-weight: 600;
		line-height: 20px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 100%;
	}

	.video_detailed .video_message p span {
		font-weight: 400;
		color: #8798ad;
		font-size: 12px;
		border: 1px solid #8798ad;
		padding: 2px 7px;
	}

	.brief {
		color: #999999;
		font-size: 12px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 100%;
	}

	.heade {
		margin-top: 10px;
		height: 25px;
	}

	.heade>p {
		display: inline-block;
		float: left;
		margin-right: 20px;
		font-size: 14px;
		line-height: 18px;
	}

	.heade>button {
		display: inline-block;
		float: left;
		left: 25px;
		margin-right: 10px;
		border: 0;
		background-color: #fff;
	}

	.heade1 {
		width: 100%;
		background-color: #5830a0;
	}

	.heade1 button {
		display: inline-block;
		float: left;
		margin-right: 25px;
		border: 0;
		background-color: #fff;
		line-height: 20px;
	}

	/* tab选中时的样式 */
	.active {
		color: #FFFFFF;
		width: 50px;
		height: 24px;
		border-radius: 4px;
	}

	/* 视频时间显示 */
	.video {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40px;
		height: 20px;
		background: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
		line-height: 20px;
		text-align: center;
	}
</style>
